<template>
  <div style="padding:3%">
    <el-row>
      <el-col :span="14">
        <el-form :model="form" ref="form" label-width="200px" label-suffix="：">
          <el-form-item label="上传头像">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="request">
              <img v-if="imageUrl" style="width:150px" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item v-for="(v,k,i) in form" :label="labels[i]" :key="i" :prop="k">
            <el-cascader :options="NetGrid" @change="changeVal" @active-item-change="handleItemChange" :props="props" v-if="k=='netGridID'">
            </el-cascader>
            <el-select v-else-if="k=='ethnicity'" v-model="form[k]">
              <el-option v-for="(v,i) in EthnicityType" :key="i" :value="v.ethnicity" :label="v.ethnicityName"></el-option>
            </el-select>
            <el-select v-else-if="k=='politics'" v-model="form[k]">
              <el-option v-for="(v,i) of Politics" :key="i" :value="v.politicsTypeValue" :label="v.politicsTypeName"></el-option>
            </el-select>
            <el-select v-else-if="k=='sex'" v-model="form[k]">
              <el-option v-for="(v,i) in sexs" :key="i" :value="v.v" :label="v.l"></el-option>
            </el-select>
            <el-select v-else-if="k=='education'" v-model="form[k]" placeholder="请选择学历">
              <el-option v-for="v of EducationType" :key="v.id" :label="v.educationTypeName" :value="v.education"></el-option>
            </el-select>
            <el-select v-else-if="k=='position'" v-model="form[k]" placeholder="请选择职务">
              <el-option v-for="(v,i) in options" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
            <el-date-picker v-else-if="k=='birthDate'" @change="changeDate" v-model="form[k]"></el-date-picker>
            <el-input v-else v-model="form[k]" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="reset">重置</el-button>
            <el-button type="primary" @click="addNewRecord">添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as api from "@/api/netGridManage";
import * as api2 from "@/api/zonghezhili/duiwujianshe";

import {
  getToken
} from '@/utils/auth'
export default {
  data() {
    return {
      imageUrl: "",
      num: 4,
      file: "",
      sexs: [
        {
          v: 0,
          l: "未知的性别"
        },
        {
          v: 1,
          l: "男性"
        },
        {
          v: 2,
          l: "女性"
        },
        {
          v: 99,
          l: "未说明性别"
        }
      ],
      form: {
        // netGridmemberID:'',// bigint(20) nOT nULL AUTO_IncRemenT,
        netGridID: "", // bigint(20) DeFAULT nULL,
        name: "", // varchar(50) DeFAULT nULL,
        sex: "", // int(11) DeFAULT nULL cOmmenT '性别编码表',
        position: "", // varchar(20) DeFAULT nULL cOmmenT '职位',
        ethnicity: "", // varchar(20) DeFAULT nULL cOmmenT '民族',
        politics: "", // varchar(20) DeFAULT nULL cOmmenT '政治面貌',
        certID: "", // varchar(18) DeFAULT nULL,
        birthDate: "", // date DeFAULT nULL,
        education: "", // varchar(10) DeFAULT nULL cOmmenT '学历',
        mobileTel: "", // varchar(18) DeFAULT nULL cOmmenT '移动电话',
        fixedTel: "" // varchar(18) DeFAULT nULL cOmmenT '固定电话',
      },
      labels: [
        "所属网格",
        "成员姓名",
        "性别",
        "职位",
        "民族",
        "政治面貌",
        "身份证",
        "出生日期",
        "学历",
        "移动电话",
        "固定电话"
      ],
      selectOptions: [],
      options: [
        {
          value: "网格长",
          label: "网格长"
        },
        {
          value: "党小组长",
          label: "党小组长"
        },
        {
          value: "警长",
          label: "警长"
        },
        {
          value: "网格员",
          label: "网格员"
        },
        {
          value: "协理员",
          label: "协理员"
        }
      ],
      props: {
        value: "netGridID",
        label: "netGridName",
        children: "children"
      },
      NetGrid: [],
      EthnicityType: [],
      Politics: [],
      EducationType: []
    };
  },
  methods: {
    changeVal(val) {
      this.form.netGridID = val[1];
    },
    changeDate(val) {
      this.form.birthDate = val;
    },
    handleItemChange(val) {
      let self = this
      let flag = true;
      this.$jquery.ajax({
        url: 'http://223.112.65.198:19898/msmis/api/netGrid/getNetGridByFaterID?netGridID=' + val[0],
        async: false,
        headers:{token:getToken()},
        success: function(res) {
          let childGrid = res.data
          for (let i = 0; i < self.NetGrid.length; i++) {
            if (self.NetGrid[i].netGridID == val[0]) {
              self.NetGrid[i].children = childGrid
              flag = false
              break;
            }
          }
          if(flag) this.form.netGridID = val[0]
        }
      })


      // api.getNetGridByFaterID(val[0]).then(res => {
      //   let childGrid = res.data;
      //   for (let i = 0; i < this.NetGrid.length; i++) {
      //     if (this.NetGrid[i].netGridID == val[0]) {
      //       setTimeout(_ => {
      //         this.NetGrid[i].children = childGrid;
      //       }, 300);
      //       flag = false;
      //       break;
      //     }
      //   }
      //   if (flag) {
      //     this.form.netGridID = val[0];
      //   }
      // });
    },
    request(event) {
      this.file = event.file;
      var read = new FileReader();
      read.readAsDataURL(this.file);
      read.onload = e => {
        this.imageUrl = e.target.result;
      };
    },
    handleChange(value) {
      this.form.netGridID = value[1];
    },
    reset() {
      for (var key in this.form) {
        this.form[key] = "";
      }
      this.file = null;
      this.imageUrl = null;
    },
    addNewRecord() {
      let param = new FormData();
      param.append("file", this.file);
      param.append("netGridMember", JSON.stringify(this.form));
      api.addNetGridMember(param).then(res => {
        if (res.data) {
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.reset();
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      });
    }
  },
  created() {
    api2.fetchServedPersonManageTypes().then(res => {
      this.NetGrid = res.data.netGrid;
      this.EthnicityType = res.data.codeEthnicityType;
      this.Politics = res.data.codePoliticsType;
      this.EducationType = res.data.codeEducationTypeMapper;

      for (let i in this.NetGrid) {
        this.NetGrid[i].children = [];
      }
    });
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
